<template>

  <div class="gouwuche">
       <div class="top">
            <div class="p">
               <span>购物车</span>
                
            </div>
             <div class="arrow" @click="tui">
            </div>
            <div class="xiaoxi" > 
            </div>
      </div>
      <div class="zhanwei"></div>
      <div class="item">
          
          <div class="topi">
              <input type="checkbox" checked/>
              <span>金义保税仓</span>
                关税
                <span>￥27.59</span>
          </div>
          <div class="bottom">
              <div class="checkbox" >
                <input type="checkbox" checked />
              </div>
             
              <div class="into">
                   <img src="xiangqing/item1.jpg"/>
                  <p>【保质期2021年7月】美国原装进口天衡宝 抗敏鸭薯无谷配方成犬...</p>
                  <div class="txt">
                      <span>￥438.00</span>
                      <div class="shu">
                        <button @click="del()">-</button>
                        <span>{{num}}</span>
                        <button @click="add()" >+</button>
                      </div>   
                 
                  </div>
                  
              </div>
          </div>
          <div class="duo">
              <p>请在01-29 23:04内付款带走我好么？拜托啦~</p>
          </div>
      </div>
    
  </div>
</template>

<script>
export default {
    data(){return{
        num:1
    }},
    mounted(){
        console.log(this.$route.params.id)
    },
    methods:{
        tui(){
            this.$router.go(-1)
        },
        add(){
            this.num+=1
        },
        del(){
            if(this.num>1){
                this.num-=1
            }
            
        }

    }

}
</script>

<style lang="scss" scoped>
.zhanwei{
    width: 100%;
    height: .5rem;
}
    .gouwuche{
        
          .top{
            width: 100%;
            height: .5rem;
        //    padding-top: .5rem;
            z-index: 100;
            position: fixed;
            top: 0px;
            background-color: #fff;
                .p{
                    text-align: center;
                    height: .5rem;
                     line-height: .5rem;
                    padding: 0 .65rem;
                }   
                .xiaoxi,.arrow{
                    width: .35rem;
                    height: .35rem;
                    position: absolute;
                    top: .07rem;
                    // background-color:orange ;
                   
                }
                 .arrow{
                    left: .05rem;
                   
                     background-size: 35px auto;
                    background-image:url(../../public/arrowz.png);
                     background-position:  0 0;
                }
                .xiaoxi{
                     right: .05rem;
                       background: url(../../public/arrowz.png) ;
                         background-position: 0 -.7rem;
                    background-size: 35px auto;
                }
               
        }
        .item{
            padding: .1rem;
             .topi{
            width: 100%;
            height: .5rem;
            line-height: .5rem;
            font-size: .16rem;
            span:nth-child(1){
                margin-left: .1rem;
                padding-left: .1rem;

            }
            span:nth-child(2){
                float: right;
                padding-right: .1rem;
            }
            }
            .bottom{
                padding: .1rem;
                width: 100%;
                height: 1.2rem;
                .checkbox{
                    height: 100%;
                    width: .15rem;
                    float: left;
                    line-height: 1.75%;
                }
                img{
                    width: .9rem;
                    height: .9rem;
                    display: block;
                    float: left;
                }
                .into{
                    float: right;
                    width: 3.05rem;
                    height: 1.1rem;
                    font-size: .14rem;
                }
                .txt{
                    margin-top: .2rem;
                    
                    .shu{
                        // float: left;
                        display: inline-block;
                        padding-left: .3rem;
                        button{
                            width:.3rem ;
                           outline: none;
                            height: .2rem;
                            border-color: #666;
                        }
                        span{
                            width: .3rem;
                            height: .2rem;
                            display: inline-block;
                            text-align: center;
                            border: 1px solid #666;
                            box-sizing: border-box;
                        }
                        button:nth-child(1){
                                border: #666 solid 1px;
    border-radius: 10px 0 0 10px;
                        }
                        button:nth-child(3){
                         border: #666 solid 1px;
                         border-radius: 0 10px 10px 0;
                        }
                    }
                }
            }
        }
       
    }
</style>